<template>
  <el-container class="c-container">
    <el-header class="c-header">
      <el-col :span="10" class="c-logo" :class="collapsed ? 'c-logo-collapse-width' : 'c-logo-width'">{{collapsed ? '' : sysName}}</el-col>
      <el-col :span="10">
        <div class="c-tools" @click.prevent="collapse">
          <i class="fa fa-align-justify"></i>
        </div>
      </el-col>
      <el-col :span="4" class="c-userinfo">
        <el-dropdown trigger="hover">
          <span class="c-userinfo-inner"><img :src="this.sysUserAvatar"/>{{sysUserName}}</span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>我的消息</el-dropdown-item>
            <el-dropdown-item>基础设置</el-dropdown-item>
            <el-dropdown-item>修改密码</el-dropdown-item>
            <el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
    </el-header>
    <el-container class="c-main">
      <el-aside :class="collapsed ? 'c-menu-collapsed' : 'c-menu-expanded'">
        <el-menu unique-opened router v-show="!collapsed" class="el-menu-vertical-demo" :default-active="$route.path">
          <template v-for="(item, index) in menuList">
            <template v-if="item.children && item.children.length > 0">
              <el-submenu :index="index + ''" :key="item.id">
                <template slot="title"><i :class="item.menuIcon"></i>{{item.menuName}}</template>
                <el-menu-item :index="child.menuPath" :key="child.id" v-for="child in item.children">{{child.menuName}}</el-menu-item>
              </el-submenu>
            </template>
            <template v-else>
              <el-menu-item :key="item.id" :index="item.menuPath"><i :class="item.menuIcon"></i>{{item.menuName}}</el-menu-item>
            </template>
          </template>
        </el-menu>
        <ul ref="menuCollapsed" class="el-menu el-menu-vertical-demo c-collapsed" v-show="collapsed">
          <li class="el-submenu c-item" :key="item.id" v-for="(item, index) in menuList">
              <template v-if="item.children && item.children.length > 0">
                <ul class="el-menu c-submenu" :class="'submenu-hook-' + index" @mouseover="showMenu(index, true)" @mouseout="showMenu(index,false)">
                  <li style="padding-left: 40px;" class="el-menu-item" :key="child.id" :class="$route.path === child.menuPath ? 'is-active' : ''" @click="$router.push(child.menuPath)" v-for="child in item.children">{{child.menuName}}</li>
                </ul>
              </template>
              <template v-else>
                <ul>
                  <li class="el-submenu">
                    <div class="el-submenu__title el-menu-item" style="height: 56px; line-height: 56px; padding: 0 20px;" :class="$route.path === item.menuPath ? 'is-active' : ''" @click="$router.push(item.menuPath)"><i :class="item.menuIcon"></i></div>
                  </li>
                </ul>
              </template>
          </li>
        </ul>
      </el-aside>
      <el-main class="c-content">
        <el-row class="c-data-cont">
          <transition name="fade" mode="out-in">
            <router-view class="c-views"></router-view>
          </transition>
        </el-row>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import api from './index'
export default {
  data () {
    return {
      sysName: 'CGP',
      collapsed: false,
      sysUserName: '',
      sysUserAvatar: require('../images/common/avatar.png'),
      menuList: [
        {
          menuName: '基础设置',
          menuIcon: 'el-icon-message',
          children: [
            {
              menuName: '连接管理',
              menuPath: '/CgpConnection'
            },
            {
              menuName: '数据库管理',
              menuPath: '/CgpDatabase'
            },
            {
              menuName: '表管理',
              menuPath: '/CgpTable'
            },
            {
              menuName: '字段管理',
              menuPath: '/CgpColume'
            }
          ]
        },
        {
          menuName: '菜单',
          menuIcon: 'el-icon-message',
          children: [
            {
              menuName: '用户管理',
              menuPath: '/CgpAuthUser'
            },
            {
              menuName: 'CgpAuthMenu',
              menuPath: '/CgpAuthMenu'
            },
            {
              menuName: '用户菜单管理',
              menuPath: '/CgpAuthUserMenu'
            }
          ]
        }
      ]
    }
  },
  methods: {
    // 获取菜单
    queryMenuTree () {
      this.$csii.ajax(api.QUERY_MENU_TREE, {
        method: 'get'
      }).then(res => {
        this.menuList = res.data
      })
    },
    // 退出登录
    logout () {
      this.$confirm('确认退出吗?', '提示', {
      }).then(() => {
        this.$csii.ajax(api.USER_LOGOUT, {
          method: 'get'
        }).then(res => {
          sessionStorage.clear()
          this.$csii.psPageNext('/login')
        })
      }).catch(() => {
      })
    },
    // 折叠导航栏
    collapse () {
      this.collapsed = !this.collapsed
    },
    showMenu (i, status) {
      this.$refs.menuCollapsed.getElementsByClassName('submenu-hook-' + i)[0].style.display = status ? 'block' : 'none'
    }
  },
  mounted () {
    // this.queryMenuTree()
  }
}
</script>

<style>
@charset "utf-8";
.c-container {
  height: 100%;
  overflow: hidden;
  top: 0px;
  bottom: 0px;
}
.c-container .c-header {
  height: 40px;
  line-height: 60px;
  background: #20a0ff;
  color: #fff;
}
.c-container .c-main {
  padding: 0;
  height: 100%;
  overflow: hidden;
}
.c-container .c-main .el-aside {
  width: 230px!important;
  min-height: 100%;
  border-right: 1px solid #e6e6e6;
  overflow: hidden;
}
.c-header .c-userinfo {
  float: right;
  text-align: right;
  padding-right: 35px;
}
.c-header .c-userinfo .c-userinfo-inner {
  cursor: pointer;
  color: #fff;
}
.c-header .c-userinfo .c-userinfo-inner img {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  margin: 10px 0px 10px 10px;
  float: right;
}
.c-header .c-logo {
  height: 60px;
  font-size: 22px;
  padding-left: 20px;
  padding-right: 19px;
  border-color: rgba(255, 255, 255, 0.3);
  border-right-width: 1px;
  border-right-style: solid;
}
.c-header .c-logo img {
  width: 38px;
  float: left;
  margin: 10px 10px 10px 18px;
}
.c-header .c-logo .txt {
  color: #fff;
}
.c-header .c-logo-width {
  width: 210px;
}
.c-header .c-logo-collapse-width {
  width: 39px;
}
.c-header .c-tools {
  padding: 0px 23px;
  width: 14px;
  height: 60px;
  line-height: 60px;
  cursor: pointer;
}
.c-main .el-aside .el-menu {
  border: 0 none;
}
.c-main .c-collapsed {
  width: 60px;
}
.c-main .c-collapsed .c-item {
  position: relative;
}
.c-main .c-collapsed .c-submenu {
  position: absolute;
  top: 0;
  left: 60px;
  z-index: 99999;
  height: auto;
  display: none;
}
.c-main .c-menu-collapsed {
  flex: 0 0 60px;
  width: 60px;
}
.c-main .c-menu-expanded .el-menu {
  width: 100% !important;
}
.c-main .c-menu-expanded .el-submenu .el-menu-item {
  min-width: 0px !important;
}
.c-main .c-content {
  height: 100%;
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
}
.c-content .c-header {
  line-height: 30px;
  padding: 0px 15px 10px 15px;
  background: #fff;
}
.c-content .c-header .c-title {
  float: left;
  width: 200px;
  color: #475669;
  font-size: 14px;
  font-weight: bold;
}
.c-content .c-data-cont {
  height: 100%;
  background-color: #fff;
  box-sizing: border-box;
}
.c-content .c-data-cont .c-views {
  height: 100%;
  padding: 10px 10px 0 10px;
  overflow: scroll;
}
.c-toolbar {
  padding: 10px;
  background: #f2f2f2;
}
.c-toolbar .c-query-box {
  text-align: right;
}
.c-toolbar .c-query-box .el-input {
  width: 220px;
}
.c-pagination-box {
  padding: 10px;
  background: #fff;
}
.c-pagination {
  float: right;
}
.c-table-list {
  width: 100%;
}
.c-dialog-btn {
  float: right;
  padding: 10px;
}
.c-transfer {
  padding-left: 70px;
}
</style>
